import  React,{Component} from 'react'

import '../../../../static/css/clientList.less'

import {Menu , Button} from 'antd'


function  goView(e){
    var url1 = '/article/view/'+e
    var win = window.open(url1,'_blank')
    win.focus()
}

function goEdit(e){
    console.log(e)
    // var url1 = '/article/view/'+e
    // var win = window.open(url1,'_blank')
    // win.focus()
}

class SelfArticles extends Component{
    constructor(props) {
        super(props);
        this.state = {
            list: this.props.list
        }
    }
    delete(e){
        console.log(e)
    }

    render(){
        var items = this.state.list
        return　(
            <>
            {
                items.map((items) =>
                    <li key={items.no} >
                        <div className='itemImage'>
                            <img src={items.image} alt='文章图片' />
                        </div>
                        <div className='itemInfo' >
                            <p className='itemTitle'>{items.title}</p>
                            <p className='itemType'>{items.author} | {items.type}</p>
                            <div className='itemInfo2'>
                                <p className='double-line'>{items.info}</p>
                            </div>
                            <p className='itemDate'>{items.date}</p>
                        </div>
                        <div className='itemButton'>
                            <Button onClick={()=> goView(items.no)}>预览</Button>
                            <Button onClick={()=> this.delete(items.no)} danger>删除</Button>
                            <Button onClick={()=> goEdit(items.no)}>编辑</Button>
                        </div>
                    </li>
                )
            }
            </>
        )
    }
}

class CollectArticles extends Component{
    constructor(props) {
        super(props);
        this.state={
            list:this.props.list
        }
    }
    render(){
        var items = this.state.list
        return　(
            <>
            {
                items.map((items) =>
                    <li key={items.no} onClick={()=> this.goView(items.no)}>
                        <div className='itemImage'>
                            <img src={items.image} alt='文章图片' />
                        </div>
                        <div className='itemInfo' >
                            <p className='itemTitle'>{items.title}</p>
                            <p className='itemType'>{items.author} | {items.type}</p>
                            <div className='itemInfo2'>
                                <p className='double-line'>{items.info}</p>
                            </div>
                            <p className='itemDate'>{items.date}</p>
                        </div>
                    </li>
                )
            }
            </>
        )
    }

}


class ClientArticleList extends Component{
    constructor(props) {
        super(props);
        this.state={
            selfList:[
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'121'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'122'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'123'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'124'},
            ],
            collectList:[
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'121'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'122'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'123'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'124'},
            ],
            articleType:'self'
        }
    }
    handleClick = e => {
        console.log('click ', e);
        this.setState({ articleType: e.key });
    };
    render() {
        var type = this.state.articleType
        return　(
            <div className='clientArticleList'>
                <Menu onClick={this.handleClick} selectedKeys={[this.state.articleType]} mode="horizontal">
                    <Menu.Item key="self" >
                        发布的文章
                    </Menu.Item>
                    <Menu.Item key="collect" >
                        收藏的文章
                    </Menu.Item>
                </Menu>
                <ul>
                {
                    // eslint-disable-next-line eqeqeq
                    type == 'self' ? (<SelfArticles list={this.state.selfList}/>)
                        : (<CollectArticles list={this.state.collectList}/>)
                }
                </ul>
            </div>
        )
    }
}

export default ClientArticleList
